<template>
  <div id="goods_id">
    <div class="goods_top">
      <div></div>
      <div class="goods_add">
        <el-button size="mini" round @click="isShow.flag = true"
          >增加</el-button
        >
      </div>
    </div>
    <el-table :data="goods_list" border style="width: 100%" width="200">
      <el-table-column fixed prop="id" label="id" width="200">
      </el-table-column>
      <el-table-column prop="firstcatename" label="一级分类" width="200">
      </el-table-column>
      <el-table-column prop="secondcatename" label="二级分类" width="200">
      </el-table-column>
      <el-table-column prop="goodsname" label="商品名称" width="200">
      </el-table-column>
      <el-table-column prop="img" label="商品图片" width="200" v-slot="props">
        <template>
          <img :src="static_host + props.row.img" class="pic-icon" />
        </template>
      </el-table-column>
      <el-table-column prop="price" label="零售价格" width="200">
      </el-table-column>
      <el-table-column prop="market_price" label="市场价格" width="200">
      </el-table-column>
      <el-table-column prop="isnew" label="是否新品" width="200" v-slot="props">
        <template>
          <el-switch
            v-model="props.row.isnew"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="ishot" label="是否热卖" width="200" v-slot="props">
        <template>
          <el-switch
            v-model="props.row.ishot"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="1"
            :inactive-value="2"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="200" v-slot="props">
        <template>
          <el-button
            type="success"
            size="mini"
            round
            v-if="props.row.status === 1"
            >正常</el-button
          >
          <el-button type="danger" size="mini" round v-else>禁用</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200" v-slot="props">
        <template>
          <el-button
            type="success"
            size="small"
            round
            @click="upload_goods(props.row)"
            >修改</el-button
          >
          <el-button
            type="danger"
            size="small"
            round
            @click="delGoods(props.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="goods_count"
      :page-size="page_size"
      @current-change="change_page"
    >
    </el-pagination>
    <addGoods
      :isShow="isShow"
      @reload_goods="reload_goods"
      ref="add_goods_ref"
    ></addGoods>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
import addGoods from "../components/addGoods.vue";
export default {
  data() {
    return {
      isShow: { flag: false },
      page: 1,
      page_size: 5,
    };
  },
  created() {
    this.GoodsListActions();
    this.GoodsCountActions();
  },
  methods: {
    delGoods(id) {
      var url = "/api/goodsdelete";
      this.$http.post(url, { id }).then((res) => {
        if (res.code === 200) {
          this.GoodsListActions();
          this.GoodsCountActions();
        }
      });
    },
    upload_goods(obj) {
      this.isShow.flag = true;
      delete obj.firstcatename;
      delete obj.secondcatename;

      this.$refs.add_goods_ref.setData(obj);
    },
    reload_goods() {
      this.GoodsLitActions();
      this.GoodsCountActions();
    },
    change_hot() {},
    change_page(page) {
      this.page = page;
      this.GoodsListActions({
        page: this.page,
        page_size: this.page_size,
      });
    },
    ...mapActions("GoodsStore", ["GoodsListActions", "GoodsCountActions"]),
  },
  computed: {
    ...mapState({
      goods_list: (state) => state.GoodsStore.goods_list,
      goods_count: (state) => state.GoodsStore.goods_count,
    }),
  },
  components: {
    addGoods,
  },
};
</script>

<style>
#goods_id .goods_top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
#goods_id .pic-icon {
  width: 100px;
}
</style>